export default function HomeCourseNav({ courses, category, views }) {

    function formatViews(views) {
        if (views < 10000) {
            return views;
        } else if (views < 100000000) {
            return Math.round(views / 1000) / 10 + "万"
        } else {
            return Math.round(views / 10000000) / 10 + '亿'
        }
    }

    const courseItems = courses.map((course) => (
        <a className="btn btn-outline-secondary mx-1" href={`/course/${course.id}`} role="button" key={course.id}>{course.name}</a>
    ));

    return (
        <div className="container">
            <div className="card">
                <h5 className="card-header">{category}课程 <span className="badge rounded-pill bg-light text-dark">{formatViews(views)}学过</span></h5>
                <div className="card-body">
                    {courseItems}
                </div>
            </div>
        </div>
    );
}